import React, { useState } from "react";
import {
  Form,
  Input,
  Row,
  Col,
  Button,
  Drawer,
  Menu,
  Radio,
  Divider,
} from "antd";
import EditableTable from "../EditableTable/index";

function AuthEdit(props) {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const { item, updateData } = props;

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    form.resetFields();
    setVisible(false);
  };

  const update = (id, detail) => {
      updateData(id, detail);
      setVisible(false);
  };

  return (
    <>
      <Button type="link" onClick={showDrawer}>
        编辑
      </Button>
      <Drawer
        title="编辑权限"
        width="50%"
        placement="right"
        onClose={onClose}
        visible={visible}
        footer={[
          <Button style={{ marginRight: 10 }} onClick={onClose}>
            取消
          </Button>,
          <Button type="primary" onClick={form.submit}>
            确定
          </Button>,
        ]}
        footerStyle={{ textAlign: "right" }}
      >
        <Menu
          selectedKeys="base"
          mode="horizontal"
          style={{ marginBottom: 25 }}
        >
          <Menu.Item key="base">基本信息</Menu.Item>
        </Menu>
        <Form
          form={form}
          name="addAuth"
          onFinish={(values) => update(item.id, values)}
          initialValues={{id: item.id, name: item.name, status: item.status}}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="权限标识(ID)"
                name="id"
                rules={[{ required: true, message: "请输入ID" }]}
              >
                <Input placeholder="只能由字母数字下划线组成" disabled={true} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="权限名称"
                name="name"
                rules={[{ required: true, message: "请输入权限名称" }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12} style={{ marginLeft: 50 }}>
              <Form.Item
                label="状态"
                name="status"
                rules={[{ required: true, message: "请选择权限状态" }]}
              >
                <Radio.Group buttonStyle="solid">
                  <Radio.Button value={1}>启用</Radio.Button>
                  <Radio.Button value={0}>禁用</Radio.Button>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Divider />
        <EditableTable />
      </Drawer>
    </>
  );
}

export default AuthEdit;
